<template>
  <div >
    <div>
      <div class="in-body">
        <div class="top-class">
          <div class="top-left-tips"></div>
          <div class="top-mid-title">
            <p style="text-align:center">
              <span @click="leftClick" style="font-weight: 600">&lt;&nbsp;&nbsp;</span>
              {{ nowYear }}年{{ nowMonth }}月
              <span
                style="font-weight: 600"
                @click="rightClick"
              >&nbsp;&gt;&nbsp;&nbsp;</span>
            </p>
          </div>
          <div class="in-body-content">
            <!-- 月视图 -->
           
            <table style="border-collapse: collapse;">
              <thead style="background-color: rgb(239, 243, 248);">
                <tr class="theard">
                  <td>周日</td>
                  <td>周一</td>
                  <td>周二</td>
                  <td>周三</td>
                  <td>周四</td>
                  <td>周五</td>
                  <td>周六</td>
                </tr>
              </thead>
              <tbody class="tbody-class">
                <tr v-for="(n, i) in dataList.length / 7" :key="i">
                  <td
                    @click="tdclick(dataList[7 * i + 0])"
                    class="class-relative"
                    :class="{
                      isnomonth: dataList[7 * i + 0].month != nowMonth,
                      isshowBag: dataList[7 * i + 0].ishowBag
                    }"

                  >
                    <div class="class-absolute">{{ dataList[7 * i + 0].day }}</div>
                     <draggable @start="Start" @end="onEnd" @add="addDrag" @moved="onMove" >

                        <div  class="drag-class-my" :key="7 * i + 0" @drop='drop($event,7 * i + 0)'>
                            <p>工作量(小时):8</p>
                            <p>工作内容:1、测试表格是否传值。2、测试用户是否相同。3、测试测试表格是否传值</p>
                        </div>

                     </draggable>

                  </td>
                  <td
                    @click="tdclick(dataList[7 * i + 1])"
                    class="class-relative"
                    :class="{
                      isnomonth: dataList[7 * i + 1].month != nowMonth,
                      isshowBag: dataList[7 * i + 1].ishowBag
                    }"
                  >
                    <div class="class-absolute">{{ dataList[7 * i + 1].day }}</div>
                     <draggable>
                     
                        <div  class="drag-class-my" :key="7 * i + 0" >
                            <p>工作量(小时):8</p>
                            <p>工作内容:1、测试表格是否传值。2、测试用户是否相同。3、测试测试表格是否传值</p>
                        </div>
                    
                     </draggable>
                  </td>
                  <td
                    @click="tdclick(dataList[7 * i + 2])"
                    class="class-relative"
                    :class="{
                      isnomonth: dataList[7 * i + 2].month != nowMonth,
                      isshowBag: dataList[7 * i + 2].ishowBag
                    }"
                  >
                    <div class="class-absolute">{{ dataList[7 * i + 2].day }}</div>
                  </td>
                  <td
                    @click="tdclick(dataList[7 * i + 3])"
                    class="class-relative"
                    :class="{
                      isnomonth: dataList[7 * i + 3].month != nowMonth,
                      isshowBag: dataList[7 * i + 3].ishowBag
                    }"
                  >
                    <div class="class-absolute">{{ dataList[7 * i + 3].day }}</div>
                  </td>
                  <td
                    @click="tdclick(dataList[7 * i + 4])"
                    class="class-relative"
                    :class="{
                      isnomonth: dataList[7 * i + 4].month != nowMonth,
                      isshowBag: dataList[7 * i + 4].ishowBag
                    }"
                  >
                    <div class="class-absolute">{{ dataList[7 * i + 4].day }}</div>
                  </td>
                  <td
                    @click="tdclick(dataList[7 * i + 5])"
                    class="class-relative"
                    :class="{
                      isnomonth: dataList[7 * i + 5].month != nowMonth,
                      isshowBag: dataList[7 * i + 5].ishowBag
                    }"
                  >
                    <div class="class-absolute">{{ dataList[7 * i + 5].day }}</div>
                  </td>
                  <td
                    @click="tdclick(dataList[7 * i + 6])"
                    class="class-relative"
                    :class="{
                      isnomonth: dataList[7 * i + 6].month != nowMonth,
                      isshowBag: dataList[7 * i + 6].ishowBag
                    }"
                  >
                    <div class="class-absolute">{{ dataList[7 * i + 6].day }}</div>
                  </td>
                </tr>
              </tbody>
            </table>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "src/utils/fetch";
import { cloneObj } from "utils";
// import misList from 'src/base/mixins/mislist'
import calendar from "./mixin/calendar"
import { getMonthInfo } from "utils";
import draggable from 'vuedraggable';
export default {
  name: "ProjectItemDateCalendar",

  mixins: [calendar],
  components: {
    draggable
  },

  data() {
    return {
      isActive: 1,
      nowNumber: 1,
      lastDay: "",
      nextDay: "",
      nowYear: "",
      nowMonth: "",
      startTime: "",
      endTime: "",
      arr: [],
      dataList: [],
      bagColorList: []
    };
  },
  created() {},
  mounted() {
    let date = new Date();
    this.nowYear = date.getFullYear();
    this.nowMonth = date.getMonth() + 1;
    this.dataList = getMonthInfo(date.getFullYear(), date.getMonth() + 1);
    console.log(this.dataList);
  },
  watch: {},
  methods: {
    isSameWeek(old, now) {
       var oneDayTime = 1000*60*60*24;
        var old_count =parseInt(old/oneDayTime);
        var now_other =parseInt(now/oneDayTime);
        return parseInt((old_count+3)/7) == parseInt((now_other+3)/7);
    },
    compareDate(date1, date2) {
        var oDate1 = new Date(date1);
        var oDate2 = new Date(date2);
        if (oDate1.getTime() >= oDate2.getTime()) {
            return true;
        } else {
            return false;
        }
    },
    tdclick(row) {
      return
      let clickTime = new Date(
        `${row.year}-${row.month < 10 ? "0" + row.month : row.month}-01`
      );
      let nowTime = new Date(
        `${this.nowYear}-${
          this.nowMonth < 10 ? "0" + this.nowMonth : this.nowMonth
        }-01`
      );

      if (this.nowMonth != row.month) {
        if (clickTime.getTime() > nowTime.getTime()) {
          this.rightClick();
        }
        if (clickTime.getTime() < nowTime.getTime()) {
          this.leftClick();
        }
      }

      // 是否点击两次
      if (this.bagColorList.length == 2) {
        this.bagColorList = [];
        this.bagColorList.push(row.timeFile);

      } else {
        this.bagColorList.push(row.timeFile);
        
      }
      if (this.bagColorList[0] > this.bagColorList[1]) {
        let a = this.bagColorList[0];
        let b = this.bagColorList[1];
        let c = a;
        this.bagColorList[0] = b;
        this.bagColorList[1] = c;
      }
      if (this.bagColorList.length >1 ) {
          let nowTime = new Date()
          let s = nowTime.getTime()
          console.log(s)
          if(this.bagColorList[0]>s||this.bagColorList[1]>s){
            this.$pop({
                type: "danger",
                message: "开始时间和结束时间都不能大于当前时间！"
            });
            return
          }
          if(!this.isSameWeek(this.bagColorList[0],this.bagColorList[1])){
             
            this.bagColorList = []
            this.dataList.forEach(item => {
                item.ishowBag = false;
            });
            this.$pop({
                type: "danger",
                message: "所选范围必须在同一周！"
                });
                return
        }

      }
      
      if (this.bagColorList.length == 1) {
        this.dataList.forEach(item => {
          item.ishowBag = false;
          if (item.timeFile == this.bagColorList[0]) {
            item.ishowBag = true;
          }
        });
      } else {
        this.dataList.forEach(item => {
          if (
            item.timeFile >= this.bagColorList[0] &&
            item.timeFile <= this.bagColorList[1]
          ) {
            item.ishowBag = true;
          } else {
            item.ishowBag = false;
          }
        });
      }

    // 在这里进行跳转---------------录入界面 传入 日期 this.bagColorList
        console.log(this.bagColorList)
        if(this.bagColorList.length >1 ){
            // setTimeout(() => {
            //     this.$router.push({path:`/projectItemAdd?timeGroupe=${this.bagColorList[0]},${this.bagColorList[1]}`})
            // }, 1000);
            
        }
        
    },
    rightClick() {
      this.nowMonth = this.nowMonth + 1;
      if (this.nowMonth > 12) {
        this.nowMonth = 1;
        this.nowYear = this.nowYear + 1;
      }
      this.dataList = getMonthInfo(this.nowYear, this.nowMonth);
    },
    leftClick() {
      this.nowMonth = this.nowMonth - 1;
      if (this.nowMonth < 1) {
        this.nowMonth = 12;
        this.nowYear = this.nowYear - 1;
      }
      this.dataList = getMonthInfo(this.nowYear, this.nowMonth);
    },
    nowDate(type, dates, date) {
      var now = "";
      if (date) {
        now = new Date(date);
      } else {
        now = new Date();
      }
      var nowTime = now.getTime();
      var day = now.getDay();
      var longTime = 24 * 60 * 60 * 1000;
      var n = longTime * 7 * (dates || 0);
      if (type == "s") {
        var dd = nowTime - (day - 1) * longTime + n;
      }
      if (type == "e") {
        var dd = nowTime + (7 - day) * longTime + n;
      }
      dd = new Date(dd);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      var day = y + "-" + m + "-" + d;
      return day;
    }
  }
};
</script>
<style lang="less" scoped>
// 拖拽样式
.drag-class-my{
  position: absolute;
  width:180px;
  height: 100px;
}
.drag-class-my p{
  margin: 0;
  padding: 0;
  font-size: 12px
  
}
 .drag {
        width: 100%;
        height: 500px;
        background-color: #fff;
  }
  .drag_box {
      width: 180px;
      height: 100px;
      border: 1px solid #666;
      background-color: #ccc;
      /* 使用定位，脱离文档流 */
      position: relative;
      top: 0px;
      left: 0px;
      /* 鼠标移入变成拖拽手势 */
      cursor: move;
      z-index: 800;
  }

</style>
<style lang="less" scoped>
body {
  margin: 0;
}
#app {
  width: 100%;
  height: 100%;
}
.in-body {
  width: 75%;
  margin: 0 auto;
  margin-top: 50px;
  /* height: 600px; */
  /* border: 1px solid red; */
}
.top-class {
  position: relative;
}
.top-left-tips {
  position: absolute;
  width: 300px;
  height: 150px;
  left: 30px;
  top: 20px;
}
.top-left-tips > span {
  display: inline-block;
  width: 55px;
  height: 25px;
  font-size: 12px;
  line-height: 25px;
  border: 1px solid rgb(224, 238, 227);
  text-align: center;
  cursor: pointer;
}
.top-mid-title {
  width: 280px;
  margin: 0 auto;
  cursor: pointer;
}
.top-mid-title p {
  margin: 0;
}
.top-mid-color {
  display: flex;
  width: 200px;
  margin-top: 20px;
  margin-left: 25px;
}
.color-noclass {
  width: 30px;
  height: 15px;
  background-color: rgb(54, 155, 255);
  margin-top: 5px;
}
.color-yesclass {
  width: 30px;
  height: 15px;
  background-color: rgb(156, 172, 208);
  margin-top: 5px;
}
.top-left-tips > span.class-left {
  border-left: none;
}
.word-day > span {
  display: inline-block;
}
.word-week {
  width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  border: 1px black solid;
  margin-right: 5px;
  font-size: 10px;
  cursor: pointer;
}
.color-word-ban {
  color: rgb(64, 158, 255);
  border: 1px solid rgb(64, 158, 255);
}
.change-color-tips {
  background-color: rgb(64, 158, 255);
}
.in-body-content {
  width: 100%;
  /* height: 400px; */
  /* border: 1px solid red; */
  margin-top: 30px;
}
.tbody-class {
  /* border: 1px solid black; */
}
.theard td {
  width: 200px;
  height: 50px;
  border: 1px solid grey;
  text-align: center;
}
.tbody-class td {
  width: 200px;
  height: 100px;
  border: 1px solid grey;
}
.class-relative {
  // position: relative;
  vertical-align: top;
  background-color: white;
  cursor: pointer;
  
}
.class-absolute {
  // position: absolute;
  // left: 0;
  // top: 3px;
  width: 30px;
  height: 15px;
  background-color: rgb(182, 204, 227);
  font-size: 10px;
  line-height: 15px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  text-align: center;
  margin-bottom: 3px;
}
.class-absolute-teacher {
  position: absolute;
  left: 0;
  top: 3px;
}
.class-ban-day-gary {
  width: 33px;
  height: 15px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  background-color: rgb(156, 172, 208);
  display: inline-block;
  margin-right: 5px;
}
.class-ban-day-blue {
  width: 33px;
  height: 15px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  background-color: rgb(84, 133, 220);
  display: inline-block;
  margin-right: 5px;
}
.isnomonth {
  background-color: #f5f5f5;
}
.isshowBag {
  background-color: LightSkyBlue !important;
}
</style>
